<template>
  <el-menu
    :background-color="background"
    :text-color="textColor"
    :active-text-color="activeTextColor"
    style="height: 100%; width: 100%"
    :default-active="defaultActive"
    :collapse-transition="false"
    router
    :collapse="isCollapse"
    class="el-menu-vertical-demo"
  >
<!--    <el-submenu index="visualization">-->
<!--      <template slot="title">-->
<!--        <i class="el-icon-s-home"></i>-->
<!--        <span style="margin-left: 16px" slot="title">数据</span>-->
<!--      </template>-->
      <el-menu-item index="/Home">
        <i class="el-icon-monitor"></i>
        <span style="margin-left: 16px"  slot="title">实时监测</span>
      </el-menu-item>
      <el-menu-item index="/Home2">
        <i class="el-icon-magic-stick"></i>
        <span style="margin-left: 16px"  slot="title">实时建议</span>
      </el-menu-item>
      <el-menu-item index="/Home3">
        <i class="el-icon-set-up"></i>
        <span style="margin-left: 16px"  slot="title">模式总览</span>
      </el-menu-item>


<!--      <el-menu-item index="/predict2">-->
<!--        <i class="el-icon-data-analysis"></i>-->
<!--        <span   slot="title">炉壁厚度预测</span>-->
<!--      </el-menu-item>-->
<!--    </el-submenu>-->
    <el-submenu index="visualization">
      <template slot="title">
        <i class="el-icon-suitcase"></i>
        <span style="margin-left: 16px" slot="title">热负荷气流分类模型</span>
      </template>
    <el-menu-item index="/tempAirGird">
      <i class="el-icon-data-analysis"></i>
      <span slot="title">组合展示</span>
    </el-menu-item>
    <el-menu-item index="/category">
      <i class="el-icon-date"></i>
      <span  slot="title">分类管理</span>
    </el-menu-item>
    <el-menu-item index="/addCategory" v-if="isManager">
      <i class="el-icon-folder-add"></i>
      <span  slot="title">分类学习</span>
    </el-menu-item>
    </el-submenu>
<!--    TODO: 此部分功能被砍掉-->
<!--    <el-menu-item index="/model">-->
<!--      <i class="el-icon-collection"></i>-->
<!--      <span style="margin-left: 16px" slot="title">机理模型管理</span>-->
<!--    </el-menu-item>-->
    <el-submenu index="data">
      <template slot="title">
        <i class="el-icon-coin"></i>
        <span style="margin-left: 16px" slot="title">参数历史数据</span>
      </template>
      <el-menu-item index="/parallelComp">
        <i class="el-icon-data-line"></i>
        <span slot="title">图表展示</span>
      </el-menu-item>
      <el-menu-item index="/historicalData">
        <i class="el-icon-pie-chart"></i>
        <span   style="" slot="title">数据查询与修改</span>
      </el-menu-item>
    </el-submenu>

    <el-submenu index="SystemManagement">
      <template slot="title">
        <i class="el-icon-files"></i>
        <span style="margin-left: 16px"  slot="title">系统管理</span>
      </template>

      <el-menu-item index="/parameter">
        <i class="el-icon-price-tag"></i>
        <span   style="margin-left: 16px" slot="title">参数管理</span>
      </el-menu-item>
      <el-menu-item index="/control" v-if="isManager">
        <i class="el-icon-edit"></i>
        <span style="margin-left: 16px" slot="title">定时管理</span>
      </el-menu-item>
      <el-menu-item index="/UserManage" v-if="isManager">
        <i class="el-icon-user"></i>
        <span style="margin-left: 16px" slot="title">用户管理</span>
      </el-menu-item>
    </el-submenu>
<!--    <el-menu-item index="/test" v-if="isManager">-->
<!--      <i class="el-icon-user"></i>-->
<!--      <span style="margin-left: 16px" slot="title">测试界面</span>-->
<!--    </el-menu-item>-->
  </el-menu>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      background:'#4e7ca1',
      isManager:false,
      defaultActive: '/Home',
      textColor:'#ffffff',
      activeTextColor: '#fbcd31',
    };
  },
  methods: {

  },
  created() {
    // 获取当前路由路径
    const currentRoute = this.$route.path;

    // 如果当前路由路径存在且不是根路径，则设置为 defaultActive
    if (currentRoute && currentRoute !== '/') {
      this.defaultActive = currentRoute;
    }

  },
  mounted() {
    if(sessionStorage.getItem("UserStatue") === "2"){
      this.isManager = true
    }

  },
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 400px;
}

</style>
